<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登陆到卷王</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
    <script src="./Semantic-UI-CSS-master/semantic.js" type="text/javascript"></script>
    <script src="./Semantic-UI-CSS-master/semantic.min.js"></script>

    <link rel="stylesheet" href="./Semantic-UI-CSS-master/semantic.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <div>
        <div class="ui middle aligned center aligned grid" style="width: 500px !important; margin:auto !important;">
            <div class="column" style="margin: 100px,100px !important;">
                <h2 class="ui black image header">
                    <img src="./images/DOCX.png" class="image">
                    <div class="content">
                        登录到卷王
                    </div>
                </h2>
                <form class="ui large form">
                    <div class="ui stacked segment">
                        <div class="field">
                            <div class="ui left icon input">
                                <i class="user icon"></i>
                                <input class="mailbox" type="text" name="email" placeholder="邮箱地址">
                            </div>
                        </div>
                        <div class="field">
                            <div class="ui left icon input">
                                <i class="lock icon"></i>
                                <input class="password" type="password" name="password" placeholder="密码">
                            </div>
                        </div>
                        <div class="field">
                            <div class="ui segment msg"
                                style="border: none !important;background-color: white !important;display: none !important;">
                                欢迎来到卷王
                            </div>
                        </div>
                        <div class="ui fluid large blue submit button">登录</div>
                    </div>
                </form>
                <div class="ui message">
                    新用户？ <a href="#">注册</a>
                </div>
            </div>
        </div>
    </div>
    <script>
        $('.mailbox').focus(() => {
            $('.ui.segment.msg').css("display", "none");
        })
        $('.mailbox').blur(() => {
            let mailpath = $('.mailbox').val();
            let pattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
            if (pattern.test(mailpath) == false) {
                $('.ui.segment.msg').css("display", "block");
                $('.ui.segment.msg').css("color", "red");
                $('.ui.segment.msg').html('邮箱格式有误！');
            }
            else {
                $('.ui.segment.msg').css("display", "none");
            }
        })
        $('.ui.fluid.large.blue.submit.button').click(() => {
            var mailbox = $('.mailbox').val();
            var password = $('.password').val();
            var xhr = new XMLHttpRequest();
            // var params = 'mailbox='+mailbox+'&password='+password;
            // xhr.open('get','http://localhost:8080/dologin?'+params);
            // xhr.send();
            xhr.open('post', 'http://localhost:8080/dologin');
            xhr.setRequestHeader('Content-Type', 'application/json');
            xhr.send(JSON.stringify({
                mailbox: mailbox,
                password: password
            }));
            xhr.onload = function () {
                if (xhr.responseText == '0') {
                    $('.ui.segment.msg').css("display", "block");
                    $('.ui.segment.msg').css("color", "red");
                    $('.ui.segment.msg').html('用户名或密码错误！');
                }
                else{
                    var nxhr = new XMLHttpRequest();
                    nxhr.withCrendentials = true;
                    var params;
                    if(xhr.responseText=='1'){
                        console.log('novip');
                        params = 'iflogin=true&isVIP=false'
                    }
                    else if(xhr.responseText=='2'){
                        console.log('vip');
                        params = 'iflogin=true&isVIP=true'
                    }
                    nxhr.open('get','http://localhost:8080/setcookie?'+params);
                    nxhr.send();
                    $('.ui.segment.msg').css("display", "none");
                    window.location.href='http://localhost:8080/workspace.html';
                }
            }
        })
    </script>
</body>

</html>